<template>
    <div class="vm-matching-container">
        <vm-common-header
            :pageTitle="pageTitle"
            :goBack="goBack"></vm-common-header>
        <vm-common-search-view
        :type="'requirePage'"
        :screen="false"
        placeholderV="请输入采购主题"
        ref="searchView">
        </vm-common-search-view>
        <tab
        bar-active-color="#d9271b"
        active-color="#d9271a">
            <tab-item selected @on-item-click="onItemClick">全部</tab-item>
            <tab-item @on-item-click="onItemClick">采购中</tab-item>
            <tab-item @on-item-click="onItemClick">已结束</tab-item>
        </tab>
        <vm-matching-purchase-all v-if="Index == 0"></vm-matching-purchase-all>
        <procurement v-if="Index == 1"></procurement>
        <hasEnded  v-if="Index == 2"></hasEnded>

        <router-link
        tag="div"
        class="matching-fiexd"
        to="/matching_purchase">
            <x-button type="warn"><x-icon type="ios-plus-empty" size="28"></x-icon>新增匹配采购</x-button>
        </router-link>
    </div>
</template>

<script>
import vmCommonHeader from '@/components/vm-common-header.vue'
import vmCommonSearchView from '@/components/vm-common-search-view.vue'
import vmMatching_purchase_all from '@/page/matching_purchase/list/matching_purchase_all.vue'
import procurement from '@/page/matching_purchase/list/procurement.vue'
import hasEnded from '@/page/matching_purchase/list/hasEnded.vue'
import { Tab, TabItem, XButton } from 'vux'
export default {
    name: "index",
    data () {
        return {
            pageTitle: this.$route.meta.pageTitle,
            goBack: this.$route.meta.goBack,
            Index: 0
        }
    },
    created () {
    },
    components: {
        'vm-common-header': vmCommonHeader,
        'vm-common-search-view': vmCommonSearchView,
        'vm-matching-purchase-all':vmMatching_purchase_all,
        'procurement': procurement,
        'hasEnded': hasEnded,
        Tab,
        TabItem,
        XButton
    },
    methods: {
      onItemClick (index) {
          this.Index = index;
      },
      // 接受子组件数据
      searchResult (value) {
         console.log(value);
      }
    }
}
</script>

<style lang="scss">
.vux-tab-wrap {
  padding: 0 !important;
  height: 80px !important;
  .vux-tab-container {
    z-index: 999;
    height: 80px !important;
    border-bottom: 1px solid #eeeeee; /* no */
    .vux-tab {
      height: 80px;
      .vux-tab-item {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #666666;
        font-size: 30px;
      }
    }
  }
}
.matching-fiexd {
    padding: 0 175px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 130px;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));
}
 .notransparent {

    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 100px;
    z-index: 2;
    background: #ffffff;
}
.matching-fiexd button {
    z-index: 222;
    height: 60px;
    border-radius: 15px; /* no */
    font-size: 28px;
    justify-content: center;
    align-items: center;
    display: flex;
}
.matching-fiexd button svg {
    fill: #ffffff;
}
</style>
